<template>
  <div class="container">
    <div>
      <i-tabs :current="current" @change="handleChange">
        <i-tab key="tab1" title="按分数排序"></i-tab>
        <i-tab key="tab2" title="按时间排序"></i-tab>
      </i-tabs>
    </div>
    <div>
      <!--        按分数排序-->
      <div v-if="current === 'tab1'">
        <i-cell-group>
          <div v-for="(record, index) in recordArrGrade" :key="index" style="background:#ffffff" @tap="toEvaluation(record.sentenceId)">
            <i-cell>
              <p style="font-size: 15pt; color: #000000">{{record.sentenceContent}}</p>
              <i-row style="font-size: 11pt; color: #888888;">
                <i-col span="16">
                  <i-icon type="activity" size="18" color="#80848f"/>{{record.updateAtFormat}}
                </i-col>
                <i-col span="8">
                  分数： {{record.grade}}
                </i-col>
              </i-row>
            </i-cell>
          </div>
        </i-cell-group>
      </div>
      <!--        按时间排序-->
      <div v-else>
        <i-cell-group>
          <div v-for="(record, index) in recordArrTime" :key="index" style="background:#ffffff" @tap="toEvaluation(record.sentenceId)">
            <i-cell>
              <p style="font-size: 15pt; color: #000000">{{record.sentenceContent}}</p>
              <i-row style="font-size: 11pt; color: #888888;">
                <i-col span="16">
                  <i-icon type="activity" size="18" color="#80848f"/>{{record.updateAtFormat}}
                </i-col>
                <i-col span="8">
                  分数： {{record.grade}}
                </i-col>
              </i-row>
            </i-cell>
          </div>
        </i-cell-group>
      </div>
    </div>
  </div>
</template>


<script>
  import {mapState} from 'vuex'
  import mpSearchbar from 'mpvue-weui/src/searchbar'
  import mpToast from 'mpvue-weui/src/toast'
  export default {
    data () {
      return {
        URL: this.GLOBAL.apiUrl, // 服务器地址
        index: 0, // 存放数组下标在页面间跳转时作为参数传递
        recordArrTime: [], // 存放按时间排序的学习记录
        recordArrGrade: [], // 存放按成绩排序的学习记录
        current: 'tab1' // 标识选项卡
      }
    },
    components: {
      mpToast,
      mpSearchbar
    },
    computed: {
      ...mapState([
        'userId'
      ])
    },
    beforeMount () {
      // 挂载前获取学习记录信息
      let _that = this
      wx.request({
        url: _that.URL + 'record/getMyRecord',
        method: 'POST',
        data: {
          userId: _that.userId
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success (res) {
          let recordArrTime = res.data.data.sortByTime
          let recordArrGrade = res.data.data.sortByGrade
          _that.recordArrTime = recordArrTime
          _that.recordArrGrade = recordArrGrade
        }
      })
    },
    methods: {
      toEvaluation (sid) {
        wx.navigateTo({
          url: '/pages/evaluation/main?sid=' + sid
        })
      },
      handleChange (detail) {
        console.log(detail.target.key)
        this.current = detail.target.key
      }
    }
  }
</script>

<style scoped>

</style>
